<template>
  <div class="distributor-filter-container">
    <el-form
      :inline="true"
      :model="filterData"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :lg="6"
          :xs="5"
          style="max-width:25%"
        >
          <el-form-item
            label="状态"
            style="width: 100%"
            prop="finishStatus"
          >
            <el-select
              v-model="filterData.finishStatus"
              style="width: 100%"
              placeholder="全部"
              clearable
              @change="refreshList"
            >
              <el-option
                v-for="(item,index) in qualificationStatusData.filter(p => p.value!=='3')"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :lg="6"
          :xs="5"
          style="max-width:25%"
        >
          <el-form-item
            label="所在地区"
            style="width: 100%"
          >
            <el-cascader
              ref="cascader"
              v-model="filterData.area"
              :popper-append-to-body="false"
              style="width: 100%;"
              :options="citys"
              placeholder="请选择所在地区"
              :props="{ expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
              clearable
              @change="areaChange"
            />
          </el-form-item>
        </el-col>
        <el-col
          :lg="6"
          :xs="5"
          style="max-width:25%"
        >
          <el-form-item
            label="关键字"
            style="width: 100%"
          >
            <el-input
              v-model="filterData.keyWord"
              clearable
              placeholder="输入商销客户名称、统一社会信用代码"
              @clear="refreshList"
            >
              <template #suffix>
                <el-tooltip
                  v-if="!filterData.keyWord"
                  class="box-item"
                  effect="dark"
                  content="输入商销客户名称、统一社会信用代码"
                  placement="top"
                >
                  <i class="iconfont icon-wenhao" />
                </el-tooltip>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="4"
          style="min-width: 170px;"
        >
          <el-form-item style="width: 100%">
            <el-button
              class="border-btn"
              @click="resetFilter"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="refreshList"
            >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <table-view
    header-cell-class-name="table-header"
    :data="listData"
    border
    :cell-style="cellStyle"
    @row-click="rowClick"
  >
    <el-table-column
      prop="sellerNumber"
      label="销商客户编号"
      fixed="left"
      :width="140"
      show-overflow-tooltip
      header-align="center"
      align="center"
    />
    <el-table-column
      prop="sellerName"
      label="销商客户名称"
      fixed="left"
      header-align="center"
      :min-width="200"
      show-overflow-tooltip
    />
    <el-table-column
      :width="160"
      show-overflow-tooltip
      prop="creditCode"
      label="统一社会信用代码"
      header-align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.creditCode||'无' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :min-width="160"
      show-overflow-tooltip
      prop="region"
      label="企业所在地区"
      header-align="center"
    >
      <template #default="scope">
        <span v-if="scope.row.provinceName">{{ scope.row.provinceName }}</span>
        <span v-if="scope.row.cityName"> / {{ scope.row.cityName }}</span>
        <span v-if="scope.row.areaName"> / {{ scope.row.areaName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :width="160"
      show-overflow-tooltip
      prop="creditCode"
      label="详细地址"
      header-align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.address||'无' }}</span>
      </template>
    </el-table-column>
    <!--
    <el-table-column
      :width="130"
      show-overflow-tooltip
      prop="userName"
      label="联系人"
      align="center"
      header-align="center"
    >
      <template #default="scope">
        <span> {{ scope.row.userName||'无' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="tel"
      label="联系电话"
      :width="150"
      show-overflow-tooltip
      header-align="center"
      align="center"
      sortable
    >
      <template #default="scope">
        <span> {{ scope.row.tel||'无' }}</span>
      </template>
    </el-table-column>
    -->
    <el-table-column
      label="状态"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="center"
      fixed="right"
    >
      <template #default="scope">
        <div
          class="status-container"
          style="line-height: 20px;"
        >
          <div class="status">{{ getLabel('qualification_status', scope.row.finishStatus) }}</div>
        </div>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="filterData.page"
    v-model:limit="filterData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="getList"
  />
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRouter } from 'vue-router'
import { crmStore } from '@CRM/store'
import area from '@/utils/area.js'

export default defineComponent({
  setup() {
    const api = inject('api')
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    var total = ref(0)
    var reactiveData = reactive({
      qualificationStatusData:
        crmStore.getters['dictionary/getDictionary']['qualification_status'] ||
        [],
      userListOption: [],
      citys: area,
      filterData: {
        finishStatus: '',
        keyWord: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        page: 1,
        pageSize: 20,
      },
      listData: [],
    })
    const cellStyle = (row) => {
      if (row.column.label === '操作') return
      return 'cursor: pointer;'
    }
    const rowClick = (row, column, event) => {
      console.log(row, column, column.label, event)
      if (column.label === '操作') return
      router.push({
        name: 'customerSellerDetail',
        query: {
          id: row.id,
        },
      })
    }
    const getList = () => {
      api.internalControl
        .INTERNAL_CONTROL_SELLER_CUSTOMER_FILE_LIST(reactiveData.filterData)
        .then((res) => {
          if (res.code === 0) {
            reactiveData.listData = res.data.list
            total.value = res.data.total
          }
        })
    }
    const areaChange = (val) => {
      if (val && val.length) {
        reactiveData.filterData.provinceCode = val[0]
        reactiveData.filterData.cityCode = val[1]
        reactiveData.filterData.areaCode = val[2]
      } else {
        reactiveData.filterData.provinceCode = ''
        reactiveData.filterData.cityCode = ''
        reactiveData.filterData.areaCode = ''
      }
      getList()
    }
    // 时间范围变化
    const handlDateChange = (val) => {
      console.log(val)
      console.log(reactiveData.filterData.date)
      if (val && val.length) {
        reactiveData.filterData.startTime = val[0]
        reactiveData.filterData.endTime = val[1]
      } else {
        reactiveData.filterData.startTime = null
        reactiveData.filterData.endTime = null
      }
      getList()
    }
    const resetFilter = () => {
      reactiveData.filterData = {
        finishStatus: '',
        keyWord: '',
        area: [],
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        page: 1,
        pageSize: 20,
      }
      getList()
    }

    // 更新列表
    const refreshList = () => {
      reactiveData.filterData.page = 1
      getList()
    }

    onMounted(() => {
      getList()
    })

    return {
      total,
      ...toRefs(reactiveData),
      cellStyle,
      rowClick,
      getList,
      areaChange,
      handlDateChange,
      refreshList,
      resetFilter,
    }
  },
})
</script>

